<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
    <view class="main">
      <view class="top-wrapper">
        <view class="num-wrapper">
          <text class="num">{{`${current}`.padStart(2, '0')}}/</text>{{`${max}`.padStart(2, '0')}}
        </view>
        <view class="time-wrapper">
          <image :src="staticImgs.time" class="time"/>{{countTimeStr}}
        </view>
      </view>
      <view class="opt-wrapper">
        <view
          v-for="(item, index) in optnList.slice(0, 4)"
          :class="['opt-item', {active: item.select === '1' && selectIndex === -1, animate: selectIndex === index}]"
          :key="index"
          @click="selectAnswer(item, index)"
        >
          <view class="opt-item-content">
            <!-- 正面 -->
            <view class="front" :style="{backgroundImage: `url(${staticImgs.optionBg})`}">
              <view class="opt-item-title">{{item.optnContent.split('/')[0]}}</view>
              <view class="opt-item-subtitle">{{item.optnContent.split('/')[1]}}</view>
            </view>
            <!-- 反面 -->
            <view class="back" :style="{backgroundImage: `url(${staticImgs.optionSelectedBg})`}">
              <view class="opt-item-title">{{item.optnContent.split('/')[0]}}</view>
              <view class="opt-item-subtitle">{{item.optnContent.split('/')[1]}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btm">
      <image
        class="btm-btn"
        :src="staticImgs.prev"
        @click="$emit('prev')"
      />
      <image
          class="btm-btn"
          :src="staticImgs.directory"
          @click="$emit('go')"
      />
      <image
        class="btm-btn"
        :src="max === current ? staticImgs.submit : staticImgs.next"
        @click="$emit('next')"
      />
    </view>
    <view v-if="dialogShow" class="dialog-bg" :style="{backgroundImage: `url(${staticImgs.dialogBg})`}">
      <view class="dialog-text">
        <typewriter
          :text="dialogText"
          cursor-img=""
          :speed="100"
          :text-style="{
            fontSize: '30rpx',
            color: '#FFF',
            lineHeight: '55rpx'
          }"
          @finished="showDialogBtn = true"
        />
      </view>
      <image class="dialog-btn" :src="staticImgs.dialogBtn" @click="dialogShow = false" v-if="showDialogBtn"/>
    </view>
  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import typewriter from '@/subcontractorD/components/jp-typewriter/index.vue'

  let clockTimer;

  export default {
    components:{
      navigationBar,
      typewriter
    },
    props:{
      max: {
        type: Number,
        default: 0
      },
      current: {
        type: Number,
        default: 0
      },
      countTime: {
        type: String,
        default: ''
      },
      optnList: {
        type: Array,
        default: () => []
      },
      dialogText: {
        type: String,
        default: ''
      },
      reloadHistoryVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/question-page/bestxg/bg.png',
          prev: this.imgBaseURL + '/scl/question-page/bestxg/prev.png',
          next: this.imgBaseURL + '/scl/question-page/bestxg/next.png',
          directory: this.imgBaseURL + '/scl/question-page/bestxg/directory.png',
          submit: this.imgBaseURL + '/scl/question-page/bestxg/submit.png',
          time: this.imgBaseURL + '/scl/question-page/bestxg/time.png',
          optionBg: this.imgBaseURL + '/scl/question-page/bestxg/opt.png',
          optionSelectedBg: this.imgBaseURL + '/scl/question-page/bestxg/opt-selected.png',
          dialogBg: this.imgBaseURL + '/scl/question-page/bestxg/dialog-bg.png',
          dialogBtn: this.imgBaseURL + '/scl/question-page/bestxg/dialog-btn.png'
        },
        selectIndex: -1,
        countTimeStr: '',
        startDateTime: 0,
        dialogShow: false,
        showDialogBtn: false
      }
    },
    watch: {
      countTime(val) {
        if (val) {
          this.countTimeStr = val
        }
      },
      current(val) {
        this.selectIndex = -1
      },
      reloadHistoryVisible: {
        immediate: true,
        handler(val) {
          this.dialogShow = !val
        }
      }
    },
    mounted() {
      this.startDateTime = this.$dayjs()
      clockTimer = setInterval(() => {
        this.countTimeStr = this.$dayjs().subtract(this.startDateTime).format('mm:ss')
      }, 1000)
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#000000'
      })
    },
    beforeDestroy(){
      clearInterval(clockTimer)
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    },
    methods:{
      selectAnswer(item, index){
        // 控制点击
        if (this.selectIndex !== -1) {
          return
        }
      	this.selectIndex = index
      	setTimeout(() => {
          this.$emit('updateSelectSclQuestion',index)
          this.$nextTick(() => this.selectIndex = -1)
        }, 500)
      }
    }
  }
</script>

<style scoped lang="scss">
.container {
  height: 1624rpx;
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.top-wrapper {
  padding: 200rpx 43rpx 70rpx;
  display: flex;
  justify-content: space-between;
}

.num-wrapper {
  font-weight: bold;
  font-size: 50rpx;
  color: #FFF;

  .num {
    color: #1584AF;
  }
}

.time-wrapper {
  font-weight: bold;
  font-size: 30rpx;
  color: #1584AF;
  display: flex;
  align-items: center;

  .time {
    width: 36rpx;
    height: 36rpx;
    margin-right: 9rpx;
  }
}

.opt-wrapper {
  padding: 0 33rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;

  .opt-item {
    position: relative;
    margin: 27rpx 10rpx;
    width: 290rpx;
    height: 440rpx;

    .opt-item-title {
      font-size: 36rpx;
      color: #FFF;
      line-height: 55rpx;
    }

    .opt-item-subtitle {
      font-size: 32rpx;
      color: #FFF;
      line-height: 55rpx;
      margin-top: 4rpx;
    }

    .opt-item-content {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;

      @mixin inner {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .front {
        z-index: 1;
        backface-visibility: hidden;
        @include inner;
      }

      .back {
        z-index: 0;
        backface-visibility: hidden;
        transform: rotateY(180deg);
        @include inner;
      }
    }

    &.active .opt-item-content {
      transform: rotateY(180deg);
    }

    &.animate {
      pointer-events: none;

      .opt-item-content {
        transition: transform 0.5s ease;
        transform: rotateY(180deg);
      }
    }
  }
}

.main {
  flex: 1 0 auto;
  position: relative;
  z-index: 2;
}

.btm {
  padding: 0 0 117rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;

  .btm-btn {
    width: 180rpx;
    height: 180rpx;
    margin-right: 12rpx;
  }
}

.dialog-bg {
  position: absolute;
  height: 100vh;
  left: 0;
  right: 0;
  top: 0;
  background: {
    size: 100% 100%;
    position: center center;
    repeat: no-repeat;
  }
  z-index: 10;
}

.dialog-text {
  font-size: 30rpx;
  color: #FFF;
  line-height: 55rpx;
  text-align: justify;
  padding: 0 66rpx;
  left: 0;
  right: 0;
  top: 1272rpx;
  position: absolute;
  white-space: normal;
}

.dialog-btn {
  width: 340rpx;
  height: 100rpx;
  margin: 0 auto;
  position: absolute;
  bottom: 92rpx;
  left: 0;
  right: 0;
}
</style>